<template>
  <div class="dropdown-opts-main" :class="{'flex' : secondActiveColumn }" >
    <checker class="dropdown-opts-list opt-scroll-container"
     v-model="optionsListObjectVal"
     default-item-class="opts-item"
     selected-item-class="opts-item-selected" style="height: 250px;">
      <div class="dropdown-cloumn">
        <checker-item v-if="checkeritem.show !== false && (checkeritem.name !== 'suid' || suidIsShow) && (checkeritem.name !== 'is_member' || ismemberIsShow) && (checkeritem.name !== 'custom_property' || customPropertyIsShow)"
        v-for="checkeritem in optionsListObject.options"
          :value="checkeritem.value"
          :key="checkeritem.value"
          @on-item-click="onItemClick(1, checkeritem.value, checkeritem)">
          <i class="opts-ico"></i>
          <span class="opts-text">{{ checkeritem.text }}</span>
        </checker-item>
      </div>
    </checker>
    <div class="dropdown-opts-list bdl opt-scroll-container" v-if="secondActiveColumn" style="height: 250px;">
      <div :on-refresh="load" ref="my_scroller" :noDataText="noDataText">
        <div v-if="secondActiveColumn.showSearch">
            <input type="text" placeholder="搜索" v-model="searchVal" class="search-input" />
        </div>

        <div v-if="secondActiveColumn.name != 'insert_time'">
          <checker v-model="secondActiveColumnValue" selected-item-class="opts-item-selected" @touchmove.stop>
              <checker-item  v-for="(option, oindex) in secondActiveColumn.options"
              v-if="isShowItem(secondActiveColumn, option)"
              class="opts-item"
              :value="option.value"
              :key="oindex"
              @on-item-click="onItemClick(2, option.value, option)">
                  <i class="opts-ico"></i>
                  <span class="opts-text">{{ option.text }}</span>
              </checker-item>
          </checker>
        </div>
        <div v-else>
          <group >
            <datetime title="开始时间"  v-model="insertTime.start_time" @on-change="onChange"></datetime>
            <datetime title="结束时间"  v-model="insertTime.end_time" @on-change="onChange"></datetime>
          </group>
        </div>
      </div>
    </div>
    <div class="dropdown-opts-list bdl opt-scroll-container"
    v-if="thirdActiveColumn && thirdActiveColumn.parent ===  secondActiveColumn.name"
    style="height: 250px;">
      <div :on-refresh="load" ref="my_scroller" :noDataText="noDataText">
        <div v-if="thirdActiveColumn.showSearch">
            <input type="text" placeholder="搜索" v-model="searchVal" class="search-input" />
        </div>

        <checker v-model="thirdActiveColumnValue" selected-item-class="opts-item-selected" @touchmove.stop>
            <checker-item  v-for="(option, oindex) in thirdActiveColumn.options"
            v-if="isShowItem(thirdActiveColumn, option)"
            class="opts-item"
            :value="option.value"
            :key="oindex"
            @on-item-click="onItemClick(3, option.value, option)">
                <i class="opts-ico"></i>
                <span class="opts-text">{{ option.text }}</span>
            </checker-item>
        </checker>
      </div>
    </div>

  </div>
</template>
<script>
  // import {Checker, CheckerItem } from 'vux'
  import {Checker, CheckerItem} from 'vux/src/components/checker'
  import Datetime from 'vux/src/components/datetime'
  import DatetimeRange from 'vux/src/components/datetime-range'
  import Group from 'vux/src/components/group'

  // import Scroller from 'vue-scroller'
  import {
    HIDE_COVER
  } from '../store/mutation-types';


  export default {
    props:{
      optionsListObject :{
        type : Object,
        required : true
      },
      suidIsShow: {
        type : Boolean,
        default: true
      },
      ismemberIsShow: {
          type : Boolean,
          default: true
      },
      customPropertyWX: {
          type : Boolean,
          default: true
      },
      customPropertyIsShow: {
          type : Boolean,
          default: true
      },
      defaultSecondActiveColumn : {},
      defaultThirdActiveColumn : {
      },
      insertTime :{
        type : Object,
        required : true
      },
    },
    data () {
      this.secondActiveColumn = "";

      return {
        noDataText: '',
        demo2: '1',
        secondActiveColumn: '',
        thirdActiveColumn: '',
        secondActiveColumnValue: '',
        thirdActiveColumnValue: '',
        osecondActiveColumnValue: '',
        optionsListObjectVal: '',
        searchVal: ''
      }
    },

    components: {
      Checker,
      CheckerItem,
      // Scroller
      Datetime,
      DatetimeRange,
      Group
    },

    mounted() {
      this.secondActiveColumn = ''
      this.initThirdActiveColumn(this.defaultThirdActiveColumn)
      this.caculate(true)
    },

    methods: {
      refresh(option) {

      },

      onChange (val) {
        console.log('change', val)
      },

      load () {
        // console.debug('eeeeeeee')
        // this.endLoading()
        if(typeof this.secondActiveColumn.isMore !== 'undefined' && this.secondActiveColumn.isMore === true) {
          this.$emit('load-more', [this.optionsListObject, this.secondActiveColumn])
        } else {
          this.endLoading()
        }
      },
      isShowItem (secondActiveColumn, option) {
        return secondActiveColumn.showSearch && option.text && option.text.indexOf(this.searchVal) !== -1 || !secondActiveColumn.showSearch
      },
      caculate(reload){
        let that = this;

        if (true === reload) {
          this.secondActiveColumn = '';

          this.optionsListObjectVal = this.optionsListObject.checked;
        } else {
          this.optionsListObject.checked = that.optionsListObjectVal;
          // console.log('selected ', that.optionsListObjectVal)
        }
        // console.debug(JSON.stringify(this.optionsListObject.options), 'this.optionsListObject.options')
        this.optionsListObject.options.forEach(function(object, b) {
          // console.log('that.optionsListObjectVal == object.value', that.optionsListObjectVal,  JSON.stringify(object), object.value, that.optionsListObjectVal == object.value)
          if(typeof object.options != 'undefined' && that.optionsListObjectVal == object.value) {
            // console.debug(object.options, 'object.options')

            that.secondActiveColumn = object
            that.optionsListObject['secondActiveColumn'] = object
            that.secondActiveColumnValue = object.checked

            object.options.forEach(function (item, b) {
              // console.debug('that.secondActiveColumnValue === item.value', that.secondActiveColumnValue === item.value, that.secondActiveColumnValue, item.value)
              if (that.secondActiveColumnValue === item.value) {
                that.secondActiveColumnValue = item.value
                object.options[b].checked = that.secondActiveColumnValue
              }
            })
          }
        })

        // console.log(JSON.stringify(this.optionsListObject))
        if (typeof this.optionsListObject.options === 'undefined') {
          // console.log('HIDE_COVER', HIDE_COVER)
          return this.$store.commit(HIDE_COVER)
        }
      },

      async onItemClick (level, value, checkeritem) {
        let hasChild = false

        if(typeof checkeritem.options !== 'undefined' && checkeritem.options.length > 0 ) {
          hasChild = true
        }

        if(level === 1) {
          this.searchVal = ''
          this.optionsListObjectVal = value
          this.caculate(false);
          console.log(checkeritem)
          this.$emit('change-filter', this.optionsListObject);
        } else if(level === 2) {
          this.secondActiveColumnValue = value
          this.secondActiveColumn.checked = value;
              // this.thirdActiveColumnValue = value

          if (this.thirdActiveColumn) {
            let name = this.thirdActiveColumn.name
            this.thirdActiveColumn.checked = '';
            this.thirdActiveColumn = ''
            this.thirdActiveColumnValue = '';
            this.$emit('change-data', {[name]: ''});
          }
          if (typeof checkeritem.options === 'function') {
            this.thirdActiveColumn = await checkeritem.options(value)
            this.thirdActiveColumn.checked = value
            this.thirdActiveColumn.parent = this.secondActiveColumn.name
            this.thirdActiveColumn.parentId = this.secondActiveColumn.checked
            this.$emit('change-third-column', this.thirdActiveColumn)
            console.log(JSON.stringify(this.thirdActiveColumn), 'this.thirdActiveColumn')
          }

          this.$emit('change-filter', this.optionsListObject);
        } else if(level === 3) {
          this.$nextTick(() => {
              // this.thirdActiveColumnValue = value
              this.thirdActiveColumn.checked = this.thirdActiveColumnValue ? value : '';
              const tvalue = this.thirdActiveColumnValue ? value : ''
              console.log('this.thirdActiveColumnValue', this.thirdActiveColumnValue, 'value', value)
              this.$emit('change-data', {[this.thirdActiveColumn.name]: tvalue});
          })
        }

        this.$emit('on-item-click', hasChild)
      },
      endLoading () {
        setTimeout(() => {
          if (this.$refs.my_scroller) {
            this.$refs.my_scroller.finishInfinite(true);
            this.$refs.my_scroller.finishPullToRefresh();
          }
        }, 1200)
      },
      initThirdActiveColumn (val) {
        if(val && Object.keys(val).length) {
          this.thirdActiveColumn = val
          this.thirdActiveColumnValue = this.thirdActiveColumn.checked
        }
      }
    },

    watch: {
      insertTime: {
        handler: function() {
          console.log('isnert_time',this.insertTime)
          this.$emit('change-time', this.insertTime)
        },
        deep: true
      },

      topFilterLoading() {
        console.debug('topFilterLoading')
        this.endLoading()
      },

      optionsListObject () {
        // this.caculate(true);
      },

      defaultThirdActiveColumn (val) {
        this.initThirdActiveColumn(val)
      },

      defaultSecondActiveColumn (defaultSecondActiveColumn) {
        setTimeout(() => {
          this.secondActiveColumn = []
          setTimeout(() => {
            this.secondActiveColumn = defaultSecondActiveColumn
            console.debug(JSON.stringify(defaultSecondActiveColumn, 'defaultSecondActiveColumn'))
          })
        }, 1500)
      }

    },

    computed:{
      topFilterLoading () {
        return this.$store.state.app.topFilterLoading
      }
    }

  };
</script>
<style lang="less">
  @import '../less/index.less';

  .top-filter-bar{

    .opts-item {
      &:extend(.clearfix all);

      padding: 10px;
      display: block;
      padding-left: 15px;
      border-bottom: 1px solid #ededed;

      &>*{
        float: left;
      }
    }

    .opts-text{
      padding-left: 12px;
      font-size: 14px;
      line-height: 20px;
    }

    .opts-ico{
      width: @top-filter-opts-ico-size;
      height: @top-filter-opts-ico-size;
      border-radius: @top-filter-opts-ico-size;
      border:1px solid #ededed;
    }

    .vux-tap-active:active{
      background-color: white;
      color: #20a0ff;

      .opts-ico{
        background-color: #20a0ff;
      }
    }

    .opts-item-selected {
      background-color: white;
      color: #20a0ff;

      .opts-ico{
        background-color: #20a0ff;
        border:1px solid #20a0ff;
      }
    }
    @max-size: 250px;
    .dropdown-cloumn {
      max-height: @max-size;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .dropdown-opts-main.flex {
      min-height: @max-size;
      display: flex;

      .loading-layer {
        line-height: 14px!important;
      }

      .spinner {
        width: 14px!important;
        height: 14px!important;
        // margin-top: 0!important;
      }

      .dropdown-opts-list {
        flex: 1;
        position: relative;
        -webkit-overflow-scrolling:touch;
      }

      .bdl{
        border-left: 1px solid #EDEDED;
      }
      .search-input {
          margin-bottom: 5px;
          width: 100%;
          height: @search-input-size;
          line-height: @search-input-size;
          text-indent: 1em;
          font-size: 14px;
          -webkit-appearance:none;
          border-radius: 0;
          border: 1px solid #EDEDED;
          display: block;
          margin-left: auto;
      }
    }

    .opt-scroll-container {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
</style>
